<template>
    <div>
        <myheader title="订单列表"/>
        <!--top-->
        <div class="top_box">
            <img slot="icon" src="../../assets/images/time.jpg" width="40" height="42">
            <div class="top_box_2_box">
                <div>个人刷脸版{{topData.self.year}}年有效
                </div>
                <div>授权有效时间:{{topData.self.expiredStartDate}} - {{topData.self.expiredEndDate}}</div>
            </div>
        </div>
        <div class="top_box">
            <img slot="icon" src="../../assets/images/time.jpg" width="40" height="42">
            <div class="top_box_2_box">
                <div class="top_box_2_box_2">
                    已购买授权{{topData.other.createAccredit}}人,已使用{{topData.other.useAccredit}}人
                </div>
            </div>
        </div>

        <!--splite-->
        <div class="splite">购买详情</div>
        <!--bottom-->
        <div class="bottom_box">
            <template v-for="order in bottomData">
                <div class="bottom_box_item">
                    <div>
                        <div>{{order.createTime}}</div>
                        <div class="item-text">刷脸续费</div>
                    </div>
                    <div>
                        <div>{{order.detailName}}</div>
                        <div>{{order.detailDuration}}年有效</div>
                    </div>
                    <div>
                        <div>￥{{order.detailPrice}}*{{order.detailAmount}}</div>
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                selected: "1",
                topData: {
                    self: {
                        expiredEndDate: 0,
                        expiredStartDate: 0,
                        year: 0
                    },
                    other: {
                        createAccredit: 0,
                        useAccredit: 0
                    }
                },
                bottomData: []
            }
        },
        mounted(){
            this.$ajax.get("/ccCustomerAccreditApiController/getCustomerAccreditInfo",
                {customerNo: this.$store.getters.customerNo},
                result => {
                    this.topData = result
                })
            this.$ajax.get("/tvOrderApiController/getOrderList",
                {customerNo: this.$store.getters.customerNo},
                result => {
                    this.bottomData = result.orders
                })
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

    .top_box {
        display: flex;
        height: 60px;
        width: 360px;
        margin-left: 7px;
        border: 1px solid #eee;
        border-radius: 5px;
        margin-top: 10px;
        margin-bottom: 10px;
        padding-top: 8px;
        padding-left: 8px;
    }

    .top_box_2_box {
        margin-left: 20px;
    }

    .top_box_2_box_2 {
        margin-top: 15px;
    }

    .top_box_2_box > :first-child {
        font-size: 15px;
    }

    .top_box_2_box > :nth-child(2) {
        margin-top: 8px;
        color: #999;
    }

    .splite {
        padding: 2%;
        background: #eee;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }

    .bottom_box {
        padding-top: 10px;
        padding-left: 5px;
        padding-right: 5px;
        border-radius: 0.2rem;
        flex-flow: row nowrap;
    }

    .bottom_box_item {
        display: flex;
        flex-flow: row nowrap;
        font-size: 13px;
        margin: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
    }

    .bottom_box_item > div {
        flex: 5;
    }

    .bottom_box_item > :nth-child(1) {
        flex: 4;
        text-align: center;
    }

    .bottom_box_item > :nth-child(2) {
        flex: 4;
        margin-left: 30px;
        color: #999;
    }

    .bottom_box_item > :nth-child(3) {
        margin-top: 8px;
        flex: 3;
    }

    .item-text {
        font-size: 12px;
        color: #aaa;
    }
</style>
